'use client'

import React from 'react';
import { BaseEditorProps } from './types';

export default function ImageEditor({ properties, updateProperty, handleFileSelect }: BaseEditorProps) {
  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">图片URL</label>
        <input
          type="text"
          className="w-full p-2 border border-gray-300 rounded"
          value={properties.src || ""}
          onChange={(e) => updateProperty('src', e.target.value)}
          placeholder="/path/to/image.jpg"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">上传图片</label>
        <input
          type="file"
          accept="image/*"
          onChange={(e) => handleFileSelect(e, { type: 'image' })}
          className="w-full text-sm file:mr-2 file:py-2 file:px-4 file:rounded file:border file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">替代文字</label>
        <input
          type="text"
          className="w-full p-2 border border-gray-300 rounded"
          value={properties.alt || ""}
          onChange={(e) => updateProperty('alt', e.target.value)}
          placeholder="图片描述"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">CSS 类别</label>
        <input
          type="text"
          className="w-full p-2 border border-gray-300 rounded"
          value={properties.className || ""}
          onChange={(e) => updateProperty('className', e.target.value)}
          placeholder="w-full h-full object-contain"
        />
      </div>
    </div>
  );
}
